<template>
	<!--配合specTree.vue使用-->
	<div class="spec-tree-item">
		<div v-if="noLast">
			<!-- 不是最后一组规格 -->
			<div class="sku-item">
				<div class="sku-item-title"><span>{{ getTreeData[0].AttributeName }}：</span></div>
				<div class="sku-item-select">
					<div v-for="(item, index) in getTreeData" v-if="!item.IsLock" :key="index" class="btn btn-gray-fill skuBtn"
						:class="activeIndex === index ? 'color-primary' : ''" @click="_clickEvent(item, index)">
						{{ item.ValueStr }}
					</div>
				</div>
			</div>
			<div v-if="getTreeData[0].ProductAttrList && getTreeData[0].ProductAttrList.length > 0" class="spec-sub-tree">
				<!--SpecTreeItem组件中调用SpecTreeItem组件-->
				<!-- 根据上级规格的数量创建多个item，根据上级规格选中的项来显示对应的下级规格栏-->
				<div v-for="(item, index) in getTreeData" v-show="activeIndex === index" :key="index">
					<SpecTreeItem :tree-data="item.ProductAttrList" :active-id="activeId" :min-num="minNum" :product-id="productId"
						:limit-buy="limitBuy" @treeClickEvent="treeClickEvent" @setCarListFunc="setCarListFunc" :tempType="tempType"
						:ActivityType="ActivityType" :ActivityPrice="ActivityPrice" :activeUnit="activeUnit" :storeId="storeId"
						:AddNum="AddNum" />
				</div>
			</div>
		</div>
		<div v-else>
			<!-- 是最后一组规格 -->
			<div class="flex-s-c mt-24 color-gray-light fs-24" v-if="getTreeData[0]">
				<div class="flex-1 tal" v-if="getTreeData[0].AttributeName">{{ getTreeData[0].AttributeName }}</div>
				<div class="flex-1 tac">价格</div>
				<div class="flex-1 tac">库存</div>
				<div class="flex-1 tar">购买数量</div>
			</div>
			<div v-for="(item, index) in getTreeData" :key="index" class="flex-s-c mt-24 fs-28"
				v-if="item.SkuModel && !item.IsLock">
				<div v-if="item.ValueStr && getTreeData[0] && getTreeData[0].AttributeName" class="num-value flex-1">
					{{ item.ValueStr }}</div>
				<div class="flex-1 tac" v-if="ActivityType === 1">{{ ActivityPrice }}</div>
				<div class="flex-1 tac" v-else>{{ item.SkuModel.V_GradePrice * activeUnit }}</div>
				<div class="flex-1 tac">{{ item.SkuModel.Stock }}</div>
				<div class="flex-1 tar flex-fe-c">
					<span class="btn-minus flex-s-0 " :class="item.Amount <= 0 ? 'color-shadow' : ''"
						@click="changeAmount(item, item.Amount, item.Stock, -1, minNum, activeUnit, item.SkuModel.LimitBuy, AddNum)">-</span>
					<div class="btn-input-box">
						<input v-model="item.Amount" type="number" class="btn-input"
							@blur="changeAmount(item, item.Amount, item.Stock, 0, minNum, activeUnit, item.SkuModel.LimitBuy, AddNum)">
					</div>
					<span class="btn-plus flex-s-0"
						:class="item.Amount >= item.Stock || (item.Amount >= item.LimitBuy && item.LimitBuy > 0) ? 'color-shadow' : ''"
						@click="changeAmount(item, item.Amount, item.Stock, 1, minNum, activeUnit, item.SkuModel.LimitBuy, AddNum)">+</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	mapMutations,
	mapGetters
} from 'vuex'
import SpecTreeItem from "../productDetail/specTreeItem.vue"


export default {
	name: 'SpecTreeItem',
	components: {
		SpecTreeItem,
	},
	props: {
		treeData: {
			type: Array,
			default() {
				return []
			}
		},
		activeId: {
			type: Number,
			default: -1
		},
		minNum: {
			type: Number,
			default: 0
		},
		limitBuy: {
			type: Number,
			default: 0
		},
		isSingle: {
			type: Boolean,
			default: false
		},
		tempType: {
			type: Number,
			default: 0
		},
		switch7: {
			type: Number,
			required: false,
			default: 0
		},
		productId: {
			type: Number,
			default: 0
		},
		ActivityType: {
			type: Number,
			required: false,
			default: 0
		},
		ActivityPrice: {
			type: Number,
			required: false,
			default: 0
		},
		activeUnit: {
			type: Number,
			required: false,
			default: 1
		},
		storeId: {
			type: String,
			required: false,
			default: ''
		},
		AddNum: {
			type: Number,
			default: 0
		},
	},
	watch: {
		//监听购物车数据
		getCartData(data) {
		},
		//监听临时购物车数据
		getTempCartData(data) {
		}
	},
	computed: {
		//...mapGetters([
		//	'getCartData',
		//	'getTempCartData',
		//])
	},
	data() {
		return {
			activeIndex: 0,
			numValue: 0,
			noLast: false,
			getTreeData: [],
			activeUnitRatio: 1,
			cartRequestList: [],
		}
	},
	watch: {
		treeData(newVal, oldVal) {
			console.log('商品变化222')
			//this.getTreeData = newVal
			this.getTreeItem()
		},
	},
	created() {

		console.log(this.treeData, "传参", this.AddNum, this.storeId)
	},
	mounted() {
		this.getTreeItem()
		//this.getTreeData = this.treeData
		//this.noLast = this.getTreeData && this.getTreeData.length>0 && this.getTreeData[0].ProductAttrList && this.getTreeData[0].ProductAttrList.length>0
		//if(!this.noLast){
		//	this.getTreeData.forEach(e=>{
		//		this.getCurrentNum(e)
		//	})
		//}
		//console.log(55)
		//console.log(this.tempType)
		//this.$forceUpdate()
	},
	methods: {
		getTreeItem() {
			this.getTreeData = this.treeData
			this.noLast = this.getTreeData && this.getTreeData.length > 0 && this.getTreeData[0].ProductAttrList && this.getTreeData[0].ProductAttrList.length > 0
			if (!this.noLast) {
				this.getTreeData.forEach(e => {
					this.getCurrentNum(e)
				})
			}
			console.log(55)
			console.log(this.tempType)
			this.$forceUpdate()
		},
		// 加入购物车
		addCart() {
			console.log('this.cartRequestList', this.cartRequestList)
			this.closePopup()
			this.$emit('addCart', this.cartRequestList)
			// this.cartRequestList = []
			// this.activeUnitName = ''
			// this.activeUnitRatio = 1
		},


		getCurrentNum(item) {
			item.Amount = 0
		},
		//获取购买数量
		getAmount(num) {
			return num
		},
		// 节点点击事件
		_clickEvent(item, index) {
			console.log(this.cartRequestList, "aa")
			this.activeIndex = index

			// 如果有传递事件函数，则调用事件函数并传递当前节点数据及组件
			this.treeClickEvent(item, index)
		},
		changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, AddNum) {
			console.log(item, LimitBuy, "改变", AddNum)
			if (item.IsLock == 1) {
				this.$toast('该商品已禁用')
				return
			}
			if (type == 0 && num >= LimitBuy && LimitBuy !== 0) {
				num = LimitBuy
				this.$toast('已达到限购数量')
			}
			if (type == 1 && num >= LimitBuy && LimitBuy !== 0) {
				this.$toast('已达到限购数量')
				return
			}
			this.$utils.changeAmount(item, num, stock, type, minNum, 1, LimitBuy, this.switch7, AddNum)
			const _obj = {}
			_obj.ProductId = this.productId
			_obj.Amount = item.Amount
			_obj.SkuId = item.SkuModel.SkuId
			_obj.ratioUnit = this.activeUnitName //选中的单位
			_obj.ratio = UnitRatio //比例
			if (this.storeId || this.storeId === '0') {
				_obj.StoreId = this.storeId
			}
			_obj.Source = this.Source
			let _newObj = true
			this.V_GradePrice = item.V_GradePrice
			this.LimitBuy = item.LimitBuy
			//if (this.cartRequestList && this.cartRequestList.length > 0) {
			//	console.log('cartRequestList', 1)
			//	console.log('cartRequestList', this.cartRequestList)
			//	for (let i = 0; i < this.cartRequestList.length; i++) {
			//		if (_obj.SkuId === this.cartRequestList[i].SkuId && _obj.ProductId === this.cartRequestList[i].ProductId) {
			//			this.cartRequestList[i].Amount = _obj.Amount
			//			_newObj = false
			//			break
			//		}
			//	}
			//}
			console.log('cartRequestList', this.cartRequestList)
			//this.cartRequestList.push(_obj)
			//if (_newObj) {
			//	this.cartRequestList.push(_obj)
			//	console.log('cartRequestList', 2)
			//	console.log('cartRequestList', this.cartRequestList)
			//}
			this.$emit('setCarListFunc', _obj, item.SkuModel.SkuImg)

			this.$forceUpdate()
		},
		setCarListFunc(obj, skuImg) {
			this.$emit('setCarListFunc', obj, skuImg)
			this.$forceUpdate()
		},
		treeClickEvent(item, index) {
			this.$emit("treeClickEvent", item, index)
		}
	}
}
</script>
<style lang="scss" scoped>
.spec-tree-item {
	.sku-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		border-bottom: 1px solid #ebedf0;

		.sku-item-title {}

		.sku-item-select {
			display: flex;
			flex-direction: row;
			margin: 20px 0;
			flex-wrap: wrap;

			.btn {
				min-width: 100px;
				border-radius: 10px;
				margin-right: 20px;
			}
		}
	}




}


.skuBtn {
	position: relative;
	font-size: 28px;
	line-height: 64px;
	padding: 0 30px;
	min-width: 136px;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 20px 20px 0;
	text-align: center;

	&:before {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		background: currentColor;
		opacity: 0.1;
		top: 0;
		left: 0;
	}
}

.btn-input-box {
	position: relative;
	margin: 0 4px;

	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: currentColor;
		opacity: 0.1;
	}

	.btn-input {
		position: relative;
		z-index: 1;
		height: 56px;
		width: 80px;
		line-height: 1;
		border: none;
		// background: transparent;
		text-align: center;
	}
}

.btn-minus,
.btn-plus {
	position: relative;
	font-size: 45px;
	line-height: 56px;
	height: 56px;
	width: 56px;
	text-align: center;
	overflow: hidden;
	border-radius: 0 8px 8px 0;

	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: currentColor;
		opacity: 0.1;
	}
}

.btn-minus {
	border-radius: 8px 0 0 8px;
}
</style>
